window.onload=function(){
    let navigation=document.querySelectorAll(".navigation li");
    let active= document.querySelectorAll('.active');
    for(var i=0;i<navigation.length;i++){
        
        navigation[i].index=i;
        navigation[i].onmouseenter=function(){
            active[this.index].classList.remove('active');
            active[this.index].classList.add('hide');
            active[this.index].onmouseover=function(){
                this.classList.remove('active');
                this.classList.add('hide');
                  
            }
            
            active[this.index].onmouseleave=function(){
                setTimeout(() => {
                    this.classList.remove('hide');
                    this.classList.add('active');
                }, 50);
                
            }
        }
        navigation[i].onmouseleave=function(){
            active[this.index].classList.remove('hide');
            active[this.index].classList.add('active');
        }
    }
}